<template>
	<div class="mainor">
		<div class="main_white">
			<div class="main_container">
				<div id="qrcode_box_main" v-if="show_qrcode">
					<div class="logo">
						<img src="@/assets/images/unipay1.png" alt="银联" />
						<!-- <span>银联支付</span> -->
					</div>
					<div class="qrcode_container">
						<div class="qrcode">
							<div class="title">
								<p>
									金额：<span>￥{{ qrcode_box_info.real_money }}</span>
								</p>
								<p>订单：{{ qrcode_box_info.order_sn }}</p>
							</div>
							<div class="qrcode_img">
								<div id="qrcode" v-if="qrCodeId"></div>
								<div v-else class="qrcode_box">
									<img src="@/assets/images/qrcode.png" alt="" />
								</div>
							</div>
						</div>
					</div>
					<!-- <el-button @click="handle">btn</el-button> -->
				</div>

				<div id="order_info_container" v-else>
					<h3>佣金账单</h3>
					<div class="order_info_box">
						<li>账单号：{{ info.order_sn }}</li>
						<li>账 期：{{ info.payment_days }}</li>
						<li>配送金额：{{ info.send_money }}</li>
						<li>佣金比例：{{ info.commission_rate }}</li>
						<li>佣金金额：{{ info.commission }}</li>
						<li>抹零金额：{{ info.zero_money }}</li>
						<li>
							实付款：<span>￥{{ info.real_money }}</span>
						</li>
					</div>
					<div class="comfirm_btn" @click="handleComfirm">确认支付</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		commission_offline,
		commission_pay,
		getCommission,
		commission_query,
		commission_close,
	} from "@/api/financial/finacialCommission";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { removePermissionToken } from "@/utils/auth";
	import QRCode from "qrcodejs2";

	export default {
		data() {
			return {
				removePermissionToken,
				oid: "",
				qrCodeId: "",
				qrcode_box_info: {
					order_sn: "",
					real_money: "",
				},
				addedFormVisible: false,
				query_timer: "",
				query_error_message: "",
				query_success_message: "",
				is_pay: false,
				info: {
					order_sn: "",
					payment_days: "",
					send_money: "",
					commission_rate: "",
					commission: "",
					zero_money: "",
					real_money: "",
				},
				show_qrcode: false,
			};
		},
		beforeRouteLeave(to, from, next) {
			if (!this.is_pay) {
				next(false);
			} else {
				next();
			}
		},
		methods: {
			// 支付请求二维码
			commission_pay(id) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				commission_pay(data).then((res) => {
					if (res.errcode == 0) {
						this.qrcode_box_info = res.data.info;
						this.qrCodeId = JSON.parse(res.data.res).qrCodeId;
						this.$nextTick(() => {
							let qrcode = new QRCode("qrcode", {
								width: 300,
								height: 300,
								text: JSON.parse(res.data.res).billQRCode,
							});
							this.query_timer = setInterval(() => {
								this.commission_query(res.data.info.id);
							}, 1000);
						});
					} else if (res.errcode == 40016) {
						this.is_pay = true;
						this.$message.success(res.errmsg);
						clearInterval(this.query_timer);
						this.query_timer = "";
						this.$router.push({
							name: "index",
						});
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			handle() {
				clearInterval(this.query_timer);
				this.query_timer = "";
				this.removePermissionToken();
				this.is_pay = true;
				this.$router.push({
					path: "/",
				});
			},
			// 查询支付
			commission_query(id) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				commission_query(data).then((res) => {
					if (res.errcode == 0 || res.errcode == 40016) {
						this.query_success_message = res.errmsg;
						this.removePermissionToken();
						this.is_pay = true;
						this.$message.success("支付成功");
						clearInterval(this.query_timer);
						this.query_timer = "";
						this.$router.push({
							name: "index",
						});
					} else {
						if (
							this.query_error_message != res.errmsg &&
							res.errmsg != "未支付"
						) {
							this.$message.error(res.errmsg);
							this.query_error_message = res.errmsg;
						}
					}
				});
			},
			getCommission(id) {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				getCommission(data).then((res) => {
					if (res.errcode == 0) {
						this.info.order_sn = res.data.info.order_sn;
						this.info.payment_days = res.data.info.payment_days;
						this.info.send_money = res.data.info.send_money;
						this.info.commission_rate = res.data.info.commission_rate;
						this.info.commission = res.data.info.commission;
						this.info.zero_money = res.data.info.zero_money;
						this.info.real_money = res.data.info.real_money;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			handleComfirm() {
				this.show_qrcode = true;
				this.$nextTick(() => {
					this.commission_pay(this.oid);
				});
			},
		},
		created() {
			if (this.$route.query.oid) {
				this.oid = this.$route.query.oid;
				this.getCommission(this.oid);
			} else {
				this.$router.back(-1);
			}
		},
		beforeDestroy() {
			clearInterval(this.query_timer);
			this.query_timer = "";
		},
	};
</script>

<style lang="scss" scoped>
.mainor {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	overflow: hidden;
}
.main_container {
	padding-top: 15vh;
	width: 761px;
	margin: 0 auto;
	#qrcode_box_main {
		width: 549px;
		margin: 0 auto;
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 25px 0 17px 0;
			img {
				display: block;
				width: 214px;
			}
			span {
				font-size: 24px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #767676;
				padding-left: 15px;
			}
		}
		.qrcode_container {
			display: flex;
			align-items: center;
			justify-content: center;
			.qrcode {
				height: 400px;
				width: 380px;
				border: 1px solid #cccccc;
				border-radius: 15px;

				.title {
					width: 300px;
					margin: 0 auto;
					padding: 15px 0;
					p {
						font-size: 16px;
						color: #767676;
						line-height: 1.5;
						span {
							color: #1a1a1a;
							font-weight: 700;
						}
					}
				}
				.qrcode_img {
					width: 300px;
					height: 300px;
					margin: 0 auto;
					border: 1px dotted #cccccc;
					#qrcode {
						display: block;
						width: 300px;
						height: 300px;
						background-color: #03a98e;
					}
					.qrcode_box {
						width: 100%;
						height: 100%;
						filter: blur(5px);
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}

#order_info_container {
	h3 {
		font-size: 30px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3a3a3a;
		text-align: center;
	}
	.order_info_box {
		width: 700px;
		height: 453px;
		border: 1px dotted #d2d2d2;
		box-sizing: border-box;
		padding: 41px 50px 41px 75px;
		margin: 0 auto;
		margin-top: 30px;
		li {
			height: 23px;
			font-size: 24px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6b6b6b;
			line-height: 38px;
			margin-bottom: 29px;
			&:last-child {
				text-align: right;
				font-size: 24px;
				span {
					color: #e84b4b;
					font-size: 30px;
				}
			}
		}
	}
	.comfirm_btn {
		margin: 0 auto;
		margin-top: 30px;
		width: 240px;
		height: 65px;
		font-size: 22px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 65px;
		user-select: none;
		background-color: #4fa388;
		box-shadow: inset 0px 5px 5px -5px #fff, inset 0px -10px 10px -8px #111;
	}
}
</style>